<template>
  <div class="recharge-consume-container">
    <div style="margin-bottom: 10px" class="card table-box">
      <el-form :inline="true" :model="param" style="padding-top: 10px">
        <el-form-item label=" 日期：">
          <el-date-picker
            v-model="param.dataTimeRange"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            date-format="YYYY/MM/DD"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
          <el-button :icon="Delete" @click="reset"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style="display: flex; justify-content: space-between">
      <div
        class="card"
        v-for="(item, index) in [
          {
            text: `储值汇总(元)`,
            value: dataReport?.allAmount.toFixed(2)
          },
          {
            text: `储值合计(元)`,
            value: dataReport?.rechargeAllAmount.toFixed(2)
          },
          {
            text: `储值金额(元)`,
            value: dataReport?.rechargeAmount.toFixed(2)
          },
          {
            text: `赠送金额(元)`,
            value: dataReport?.giftAmount.toFixed(2)
          },
          {
            text: `消费合计(元)`,
            value: dataReport?.consumeAllAmount.toFixed(2)
          },
          {
            text: `储值余额消费(元)`,
            value: dataReport?.rechargeAmount.toFixed(2)
          },
          {
            text: `赠送余额消费(元)`,
            value: dataReport?.giftConsumeAmount.toFixed(2)
          }
        ]"
        :key="index"
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 12%;
          height: 150px;
          border-radius: 4px;
        "
      >
        <div style="margin-bottom: 15px; font-size: 16px; color: #333333">
          {{ item.text }}
        </div>
        <div style="margin-top: 15px; font-size: 18px; color: #fdc31d">
          {{ item?.value }}
        </div>
      </div>
    </div>
    <el-card style="height: 500px; margin-top: 10px">
      <LiLineChart :title="option.title" :x-array="option.xArray" :y-array="option.yArray" :height="480" />
    </el-card>
    <el-card style="height: 500px; margin-top: 10px">
      <LiLineChart :title="option2.title" :x-array="option2.xArray" :y-array="option2.yArray" :height="480" />
    </el-card>
  </div>
</template>

<script setup lang="tsx" name="rechargeConsume">
import { ref, onMounted, reactive } from "vue";
import { Delete, Search } from "@element-plus/icons-vue";
import { GetRechargeConsume } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import { Reporting } from "@/api/interface";
import LiLineChart from "../../../../components/LiLineChart/index";

//泛型
declare type EChartOption = {
  title: string;
  xArray: any[];
  yArray: any[];
};

/* 数据 */
let param = ref<{ dataTimeRange: string[]; reportId: number }>({
  dataTimeRange: [formatDate(-7, "start", "yyyy-MM-dd"), formatDate(-1, "end", "yyyy-MM-dd")],
  reportId: 305
});

let dataReport = ref<Reporting.RechargeConsumeData | null>();

let option = reactive<EChartOption>({
  title: "充值",
  xArray: [],
  yArray: []
});

let option2 = reactive<EChartOption>({
  title: "消费",
  xArray: [],
  yArray: []
});

/* 生命周期 */
onMounted(async function () {
  await GetPageData();
});

/* 方法 */
const GetPageData = async function () {
  dataReport.value = (await GetRechargeConsume(param.value)).data;
  let trend = dataReport.value.trend;
  let xArray = trend?.map(l => l.name);
  option.xArray = xArray;
  option2.xArray = xArray;
  option.yArray = trend.map(l => l.dayIn);
  option2.yArray = trend.map(l => l.dayConsume);
};

const search = async () => {
  await GetPageData();
};

async function reset() {
  param.value.dataTimeRange = [formatDate(-7, "start", "yyyy-MM-dd"), formatDate(-1, "end", "yyyy-MM-dd")];
  await GetPageData();
}
</script>
